<template>
	<view class="container">
		<!-- 居中按钮 -->
		<view class="center-button-container">
			<button class="center-button" @tap="drawerStore.toggleDrawer(true)">
				<text class="button-text">选择你的协同仓</text>
			</button>
		</view>
			<view class="center-button-container">
			<button class="center-button" @tap="logout">
				<text class="button-text">退出登录</text>
			</button>
		</view>

		<!-- 右侧抽屉 -->
		<RightDrawer />
	</view>
</template>

<script setup>
import { ref } from 'vue'
import { useDrawerStore } from '../../store/drawer'
import { useUserStore } from '../../store/user'

// 使用 Pinia
const drawerStore = useDrawerStore()
const userStore = useUserStore()

// 退出登录
const logout = () => {
  uni.showModal({
    title: '确认退出',
    content: '确定要退出登录吗？',
    success: (res) => {
      if (res.confirm) {
        // 先显示提示
        uni.showToast({
          title: '正在退出登录...',
          icon: 'loading',
          duration: 500
        })
        
        // 清除用户状态
        userStore.logout()
        
        // 确保完全清除所有相关存储
        uni.removeStorageSync('cdx_merchant_userInfo')
        uni.removeStorageSync('cdx_merchant_warehouseCode')
        uni.removeStorageSync('cdx_merchant_warehouseInfo')
        
        // 延迟跳转到登录页，确保存储清除完成
        setTimeout(() => {
          // 使用reLaunch清空页面栈，避免返回循环
          uni.reLaunch({
            url: '/pages/login/index'
          })
        }, 500)
      }
    },
    fail: () => {
      uni.showToast({
        title: '操作失败，请重试',
        icon: 'none'
      })
    }
  })
}
</script>

<style lang="scss" scoped>
// 定义变量
$primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
$button-gradient: linear-gradient(45deg, #FF6B9B, #C44569);
$white: #FFFFFF;
$gray-100: #F8F9FA;
$gray-200: #E9ECEF;
$gray-300: #F0F0F0;
$gray-400: #F5F5F5;
$gray-500: #666666;
$gray-600: #333333;
$success-bg: #D4EDDA;
$success-text: #155724;
$warning-bg: #FFF3CD;
$warning-text: #856404;
$danger-bg: #F8D7DA;
$danger-text: #721C24;

.container {
	width: 100%;
	height: 100vh;
	background: $primary-gradient;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 80rpx;
}

// 居中按钮容器
.center-button-container {
	display: flex;
	justify-content: center;
	align-items: center;
}

// 居中按钮样式
.center-button {
	width: 300rpx;
	height: 100rpx;
	background: $button-gradient;
	border: none;
	border-radius: 50rpx;
	box-shadow: 0 8rpx 20rpx rgba(255, 107, 155, 0.3);
	display: flex;
	justify-content: center;
	align-items: center;
	transition: all 0.3s ease;

	&:active {
		transform: scale(0.95);
		box-shadow: 0 4rpx 10rpx rgba(255, 107, 155, 0.4);
	}
}

.button-text {
	color: $white;
	font-size: 32rpx;
	font-weight: bold;
	text-align: center;
}

// 抽屉内容样式
.drawer-content {
	width: 100%;
	height: 100%;
	background: $white;
	display: flex;
	flex-direction: column;
}

.scroll-view-box {
	flex: 1;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

// 页面样式可以根据需要添加
</style>